<template>
  <div class="navigationWrap">
    <div class="operator">
      <el-date-picker
        v-model="CompParams.dateInfo"
        type="date"
        value-format="YYYY-MM-DD"
        placeholder="请输入查询日期"
      />
      <div class="addBtn" @click="doEvent">{{ btnText }}</div>
    </div>
    <div
      class="spin"
      v-loading="loading"
      :element-loading-background="loadingBackGround"
      :element-loading-text="loadingText"
    >
      <template v-if="!loading">
        <template v-if="list.length">
          <ul>
            <slot name="list" />
          </ul>
          <slot name="pagination" />
        </template>
        <img :src="nodata" v-else />
      </template>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch } from "vue";
import nodata from "@/utils/assets/nodata.svg";
import { LoadingBackGround, LoadingText } from "@/utils/constant";

defineProps({
  loading: {
    type: Boolean,
    default: () => false
  },
  loadingBackGround: {
    type: String,
    default: () => LoadingBackGround
  },
  loadingText: {
    type: String,
    default: () => LoadingText
  },
  btnText: {
    type: String,
    default: () => "数据填报"
  },
  list: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(["gainRecord", "addEvent"]);

// 列表硬性参数信息
const CompParams = reactive({
  dateInfo: ""
});
// 按钮事件
const doEvent = () => {
  emit("addEvent");
};

watch(CompParams, () => {
  emit("gainRecord", CompParams);
});
</script>

<style scoped lang="less">
@import "./style.less";
</style>
